<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" :style="{ marginTop: safeTop + 'px' }" @click="goToBack">
				<image src="/static/base/back.svg" class="menu-icon" mode="aspectFit" />
			</view>
			<view class="header-title" :style="{ marginTop: safeTop + 'px' }">粉丝列表</view>
			<view class="header-right" :style="{ marginTop: safeTop + 'px' }">
				<image src="/static/base/index/more.png" class="more-icon" mode="aspectFit" />
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-box" :style="{ top: searchTop + 'px' }">
			<input
				v-model="searchKeyword"
				placeholder="输入名称搜索"
				class="search-input"
				@input="handleSearch"
			/>
			<image src="/static/base/seach.svg" class="search-icon" mode="aspectFit" />
		</view>

		<!-- 用户列表 -->
		<view class="user-list">
			<view :style="{ height: contentTop + 'px' }"></view>
			<view v-for="(user, index) in filteredUserList" :key="user.uid" class="user-item">
				<image
					:src="user.avatar"
					class="user-avatar"
					mode="aspectFill"
					@click="goToUserPage(user.uid)"
				/>
				<view class="user-info">
					<view class="user-name">{{ user.nickname }}</view>
					<view class="user-meta">
						<text class="fans-count">粉丝数：{{ formatFansCount(user.fans_count) }}</text>
						<view class="user-tag">{{ user.identity }}</view>
					</view>
					<view class="user-desc">{{ user.signature || '暂无简介' }}</view>
				</view>
				<view
					class="follow-btn"
					:class="{ 'followed': user.userFollow }"
					@click="toggleFollow(user, index)"
				>
					{{ user.userFollow ? '已关注' : '关注' }}
				</view>
			</view>

			<!-- 加载更多提示（可选） -->
			<view v-if="loading" class="loading">加载中...</view>
			<view v-if="!hasMore && filteredUserList.length > 0" class="no-more">没有更多了</view>
		</view>
	</view>
</template>

<script>
import { getFansList } from '@/api/base/designer.js'
import { followUser, cancelFollowUser } from '@/api/base/index.js'

export default {
	data() {
		return {
			safeTop: 0,
			searchTop: 0,
			contentTop: 0,
			uid: 0, // 默认查看当前用户粉丝（可从路由参数获取）
			identity: 0, // 0: 不筛选, 1: 创作者, 2: 设计师
			page: 1,
			limit: 100,
			userList: [],
			originalList: [], // 用于搜索时保留原始数据
			searchKeyword: '',
			loading: false,
			hasMore: true
		}
	},

	computed: {
		filteredUserList() {
			if (!this.searchKeyword.trim()) {
				return this.userList
			}
			const keyword = this.searchKeyword.trim().toLowerCase()
			return this.originalList.filter(user =>
				user.nickname.toLowerCase().includes(keyword)
			)
		}
	},

	onLoad(options) {
		const { barTop } = this.$util.getWXStatusHeight()
		this.safeTop = barTop
		this.searchTop = barTop + 38
		this.contentTop = barTop + 90

		// 可从路由参数传入 uid（例如：/pages/fans?uid=123）
		this.uid = options.uid ? parseInt(options.uid) : 0
		this.loadFansList()
	},

	methods: {
		async loadFansList(isLoadMore = false) {
			if (this.loading || (!isLoadMore && !this.hasMore)) return

			this.loading = true
			if (!isLoadMore) {
				this.page = 1
				this.userList = []
			}

			try {
				const res = await getFansList(this.uid, this.identity, this.page, this.limit)
				if (res.status === 200) {
					const list = res.data.list || []
					if (!isLoadMore) {
						this.originalList = list
						this.userList = list
					} else {
						this.originalList = [...this.originalList, ...list]
						this.userList = [...this.userList, ...list]
					}

					this.hasMore = list.length === this.limit
					this.page++
				} else {
					uni.showToast({ title: res.msg || '加载失败', icon: 'none' })
				}
			} catch (err) {
				console.error('获取粉丝列表失败', err)
				uni.showToast({ title: '网络错误', icon: 'none' })
			} finally {
				this.loading = false
			}
		},

		handleSearch() {
			// 搜索在本页过滤，不重新请求
		},

		async toggleFollow(user, index) {
			const newFollowState = !user.userFollow
			try {
				if (newFollowState) {
					await followUser(user.uid)
				} else {
					await cancelFollowUser(user.uid)
				}

				// 更新本地状态
				user.userFollow = newFollowState
				// 同时更新 originalList（用于搜索）
				const originalIndex = this.originalList.findIndex(u => u.uid === user.uid)
				if (originalIndex !== -1) {
					this.originalList[originalIndex].userFollow = newFollowState
				}

				uni.showToast({
					title: newFollowState ? '已关注' : '已取消关注',
					icon: 'none',
					duration: 1000
				})
			} catch (err) {
				console.error('操作失败', err)
				uni.showToast({ title: '操作失败，请重试', icon: 'none' })
				// 回滚状态
				user.userFollow = !newFollowState
			}
		},

		goToUserPage(uid) {
			uni.navigateTo({
				url: `/pages/sub_base/designer-profile/index?uid=${uid}`
			})
		},

		goToBack() {
			uni.navigateBack()
		},

		formatFansCount(count) {
			if (count >= 10000) {
				return (count / 10000).toFixed(1) + '万'
			}
			return count.toString()
		},

		// 可选：上拉加载更多
		onReachBottom() {
			if (this.hasMore && !this.searchKeyword.trim()) {
				this.loadFansList(true)
			}
		}
	}
}
</script>

<style scoped>
/* 保留你原有的样式，仅补充 loading / no-more */
.container {
	min-height: 100vh;
	background-color: #F2F8FC;
	box-sizing: border-box;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 27.76rpx;
	z-index: 100;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-left {
	width: 76.34rpx;
	height: 76.34rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-icon {
	width: 48rpx;
	height: 48rpx;
}

.more-icon {
	width: 50rpx;
	height: 50rpx;
}

.header-title {
	font-size: 31.23rpx;
	font-weight: 600;
	color: #333333;
}

.header-right {
	width: 80rpx;
	display: flex;
	justify-content: flex-end;
}

.search-box {
	width: 100%;
	position: fixed;
	background: #fff;
	display: flex;
	padding: 7px 14px;
	z-index: 999;
}

.search-input {
	flex: 1;
	height: 32px;
	background-color: #F2F8FC;
	display: flex;
	align-items: center;
	padding: 0 40px;
	border-radius: 16px;
}

.search-icon {
	top: 14px;
	left: 28px;
	width: 20px;
	height: 20px;
	position: absolute;
}

.user-list {
	/* padding: 0 30rpx; */
}

.user-item {
	background-color: #fff;
	padding: 30rpx;
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #d2d2d2;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	background-color: #E0E0E0;
}

.user-info {
	flex: 1;
	padding-left: 30rpx;
}

.user-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.user-meta {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
	flex-wrap: wrap;
}

.fans-count {
	margin-right: 15rpx;
}

.user-tag {
	background-color: #F2F8FC;
	color: #0066CC;
	border-radius: 6rpx;
	padding: 4rpx 12rpx;
	font-size: 24rpx;
	margin-right: 10rpx;
}

.user-desc {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
}

.follow-btn {
	width: 140rpx;
	height: 60rpx;
	background-color: #000;
	color: #fff;
	border-radius: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	transition: all 0.3s ease;
}

.follow-btn.followed {
	background-color: #fff;
	color: #999;
	border: 1rpx solid #999;
}

/* 补充样式 */
.loading,
.no-more {
	text-align: center;
	padding: 20rpx;
	color: #999;
	font-size: 28rpx;
}
</style>